<template>
    <Modal
            width="1200"
            v-model="visible"
            :title="titleName"
            :key="key"
    >
        <div style="margin-top:10px ;min-height: 600px">
            <vxe-table border
                       resizable
                       row-id="id"
                       :row-key="true"
                       show-overflow="tooltip"
                       highlight-hover-row
                       align="center"
                       header-align="center"
                       ref="xTree"
                       :loading="Loading"
                       :data="tableData">
                <vxe-table-column field="name" title="名称" align="center" width="200"/>
                <vxe-table-column title="操作" width="950" fixed="right" align="left">
                    <template #default="{row}">
                        <div class="demo-upload-content" v-for="item in row.imgList" :key="item.id">
                            <div class="demo-upload-list">
                                <img :src="item.DOCS0002">
                                <div class="demo-upload-list-cover">
                                    <Icon type="ios-eye-outline" @click.native="handleDetail(item)"></Icon>
                                    <Icon type="ios-trash-outline"
                                          @click.native="handleDelete(item)"></Icon>
                                </div>
                            </div>
                        </div>
                        <div class="demo-upload-drag">
                            <Upload action="" :accept="acceptImg"
                                    :before-upload="(file) => beforeUpload(file,'',row.DOCP0001)">
                                <Icon type="ios-camera" size="20"></Icon>
                            </Upload>
                        </div>
                    </template>

                </vxe-table-column>
            </vxe-table>
        </div>
        <div slot="footer">
            <Button @click="cancel">取消</Button>
            <Button type="primary" @click="ok">确定</Button>
        </div>
        <img-display ref="modalForm"/>
    </Modal>
</template>

<script>
    import {CommonMixin} from '@/views/common/js/CommonMixin'
    import {postAction} from '@/api/request'
    import ImgDisplay from './ImgDisplayModal'

    export default {
        name: "drawer",
        mixins: [CommonMixin],
        components: {ImgDisplay},
        data() {
            return {
                titleName: "档案管理",
                visible: false,
                width: 800,
                Loading: false,
                key: "",
                tableData: [],
                url: {
                    delete: '/api/ac/subsistence/Ss15200Service/delete',
                    load: '/api/ac/subsistence/Ss15200Service/detail',
                    insert: '/api/ac/subsistence/Ss15200Service/createData',
                },
                DOCP0002: '',
            }
        },
        methods: {
            edit(row) {
                this.tableData = [];
                this.visible = true;
                this.DOCP0002 = row.hisid;
                this.tableData = [];
                this.load();
            },
            load() {
                this.Loading = true;
                postAction(this.url.load, {DOCP0002: this.DOCP0002}).then((res) => {
                    if (res.data.errcode != 0) {
                        this.$Message.error(res.data.errmsg);
                    } else {
                        this.tableData = res.data.data;
                    }
                }).finally(() => {
                    this.Loading = false;
                })
            },
            loadImg(response, file, name, id) {
                if (response.errcode == 0) {
                    var param = new Object();
                    param.DOCS0002 = response.data;
                    param.DOCP0001 = id;
                    param.name = file.name;
                    this.insert(param);
                } else {
                    this.$Message.error('上传失败！');
                    this.Loading = false;
                }
            },
            handleDelete(item) {
                this.$Modal.confirm({
                    title: '确定删除吗？',
                    onOk: () => {
                        this.delete(item);
                    }
                })
            },
            insert(param) {
                var that = this;
                param.DOCP0002 = this.DOCP0002;
                var tableData = this.tableData;
                var DOCP0001 = param.DOCP0001;
                postAction(this.url.insert, param).then((res) => {
                    if (res.data.errcode != 0) {
                        that.$Message.error(res.data.errmsg);
                    } else {
                        for (var i in tableData) {
                            if (DOCP0001 == tableData[i].DOCP0001) {
                                var imgList = tableData[i].imgList;
                                imgList.push(res.data.data)
                            }
                        }
                        that.$Message.success('上传成功！');
                    }
                }).finally(() => {
                    that.Loading = false;
                })
            },

            delete(item) {
                var that = this;
                var DOCP0001 = item.DOCP0001;
                var id = item.id;
                postAction(that.url.delete, item).then((res) => {
                    if (res.data.errcode == 0) {
                        var tableData = this.tableData;
                        for (var i in tableData) {
                            if (DOCP0001 == tableData[i].DOCP0001) {
                                var imgList = tableData[i].imgList;
                                for (var j in imgList) {
                                    if (imgList[j].id == id) {
                                        imgList.splice(j, 1);
                                    }
                                }
                            }
                        }
                        that.$Message.success("删除成功！");
                    } else {
                        that.$Message.error(res.data.errmsg);
                    }
                });
            },
            cancel() {
                this.visible = false;
            },
            ok() {
                this.$emit('ok');
                this.visible = false;
            }
        }
    }
</script>

<style scoped>
    /deep/ .vxe-table .vxe-body--column.col--ellipsis > .vxe-cell {
        max-height: 500px;
        white-space: pre-line;
    }

    /deep/ .demo-upload-list {
        margin: 0px;
        border: 0px;
        /*height: 80px;*/
        /*width: 30px;*/
        /*height: 30px;*/
        /*line-height: 30px;*/
    }

    .demo-upload-drag {
        width: 60px;
        height: 60px;
        line-height: 60px;
        display: inline-block;
        text-align: center;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        border: 1px dashed #dcdee2;
        cursor: pointer;
        transition: border-color .2s ease;
        margin-left: 5px;
        margin-top: 5px;
    }

    /deep/ .ivu-upload-select {
        width: 100%;
    }

    .demo-upload-prompt .ivu-tooltip {
        position: absolute;
        top: 0px;
        left: 0;
        cursor: pointer;
        /*height: 20px;*/
    }

    .demo-upload-content {
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        position: relative;
        margin: 5px;
    }

</style>
